<template>
<div>
	<div id="main-top">
		<div id="main-top-left">
			<el-button type="primary" class="commonUser" @click="changeData">正常状态</el-button>
			<el-button type="primary" class="lockUser" @click="changeData">锁定状态</el-button>
			<el-button type="primary" class="delUser" @click="changeData">删除状态</el-button>
			<el-button type="primary" class="allUser" @click="changeData">全部用户</el-button>
		</div>
		<div id="main-top-right">
			<el-input
			  placeholder="请输入用户名"
			  clearable v-model="searchcontent">
			</el-input>
			<el-button type="primary" @click="search">点击搜索</el-button>
		</div>
		</div>
	  <el-table
	      :data="useDate"
	      border
	      style="width: 100%"
		  >
		  <el-table-column
		    prop="state"
		    label="状态"
		  			width="100"
		    >
		  </el-table-column>
	      <el-table-column
	        prop="id"
	        label="id"
			width="100"
	        >
	      </el-table-column>
	      <el-table-column
	        prop="name"
	        label="用户名"
			width="100"
	        >
	      </el-table-column>
	      <el-table-column
	        prop="password"
	        label="密码"
			width="100"
	        >
	      </el-table-column>
	      <el-table-column
	        prop="sex"
	        label="性别"
			width="100"
	        >
	      </el-table-column>
		  <el-table-column
		    prop="role"
		    label="用户权限"
		  	width="100"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="phone"
		    label="用户电话"
			width="200"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="address"
		    label="收货地址"
			width="400"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="createTime"
		    label="用户创建时间"
			width="200"
		    >
		  </el-table-column>
		  <el-table-column
		    prop="updateTime"
		    label="上次修改时间"
			width="200"
		    >
		  </el-table-column>
	      <el-table-column
	        fixed="right"
	        label="操作"
			width="100"
	       >
	        <template slot-scope="scope" >
	          <el-button  type="text" size="small" @click="lookuser(scope.row)">查看</el-button>
	          <el-button type="text" size="small"  @click="edit(scope.row)">编辑</el-button>
	        </template>
	      </el-table-column>
	    </el-table>
		<!-- 分页功能 -->
		<el-pagination
		    background
		    @current-change="handleCurrentChange"
		    layout="prev, pager, next"
		    :page-count="total" style="text-align: right; margin-top: 16px;">
			<!-- page-count：总共多少页 -->
		</el-pagination>
		<!-- 对话框 -->
		<el-dialog
		  title="用户信息"
		  :visible.sync="dialogVisible" 
		   width="80%"
		  :before-close="handleClose" 
		  style="size: 16px; margin-left: 80px;"> <!-- before-close:右上角小叉叉 -->
		  <el-link :underline="false"><span style="font-size: 16px; color:#409EFF;margin-bottom: 8px;display: block;">用户ID:{{dialogLookData.id}}</span></el-link>
		  <!-- 点击查看对话框界面 -->
		  <el-descriptions class="margin-top"  :column="3"  border v-if="temp">
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-user"></i>
		          用户名
		        </template>
		        {{dialogLookData.name}}
		      </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-view"></i>
			      用户密码
			    </template>
			    {{dialogLookData.password}}
			  </el-descriptions-item>
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-mobile-phone"></i>
		          手机号
		        </template>
		         {{dialogLookData.phone}}
		      </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-male"></i>
			      用户性别
			    </template>
			    {{dialogLookData.sex}}
			  </el-descriptions-item>
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-aim"></i>
		          用户状态
		        </template>
		        {{dialogLookData.state}}
		      </el-descriptions-item>
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-medal"></i>
		          用户权限
		        </template>
		        {{dialogLookData.role}}
		      </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-location-outline"></i>
			      收货地址
			    </template>
			    {{dialogLookData.address}}
			  </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-pie-chart"></i>
			      用户创建时间
			    </template>
			    {{dialogLookData.createTime}}
			  </el-descriptions-item>
			  <el-descriptions-item>
			    <template slot="label">
			      <i class="el-icon-timer"></i>
			      上次修改时间
			    </template>
			    {{dialogLookData.updateTime}}
			  </el-descriptions-item>
		    </el-descriptions>
		  <!-- 点击编辑对话框界面 -->
		  <el-descriptions class="margin-top" title="" :column="3"  border v-if="!temp">
		    <el-descriptions-item>
		    <template slot="label">
		        <i class="el-icon-user"></i>
		        用户名
		    </template>
			<el-input
			  placeholder="请输入用户名"
			  v-model="dialogLookData.name"
			  clearable>
			</el-input>
		    </el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-view"></i>
		  			用户密码
		  		</template>
		  		 <el-input
		  		   placeholder="请输入密码"
		  		   v-model="dialogLookData.password"
		  		   show-password>
		  		 </el-input>
		  		</el-descriptions-item>
		    <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-mobile-phone"></i>
		          手机号
		        </template>
		         <el-input
		           placeholder="请输入手机号"
		           v-model="dialogLookData.phone"
		           clearable>
		         </el-input>
		    </el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-male"></i>
		  			用户性别
		  		</template>
		  		<template>
		  		  <el-radio v-model="dialogLookData.sex" label="男">男</el-radio>
		  		  <el-radio v-model="dialogLookData.sex" label="女">女</el-radio>
		  		</template>
		  		</el-descriptions-item>
		    <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-aim"></i>
		          用户状态
		        </template>
				<el-radio-group v-model="dialogLookData.state">
				    <el-radio :label="0">正常</el-radio>
				    <el-radio :label="1">锁定</el-radio>
				    <el-radio :label="2">删除</el-radio>
				  </el-radio-group>
		      </el-descriptions-item>
		      <el-descriptions-item>
		        <template slot="label">
		          <i class="el-icon-medal"></i>
		          用户权限
		        </template>
				<el-radio-group v-model="dialogLookData.role">
				    <el-radio :label="0">普通</el-radio>
				    <el-radio :label="1">VIP</el-radio>
				    <el-radio :label="2">管理员</el-radio>
				  </el-radio-group>
		      </el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-location-outline"></i>
		  			收货地址
		  		</template> <el-input
		           placeholder="请输入收货地址"
		           v-model="dialogLookData.address"
		           clearable>
		         </el-input>
		  		</el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-pie-chart"></i>
		  			用户创建时间
		  		</template>
		  		{{dialogLookData.createTime}}
		  		</el-descriptions-item>
		  		<el-descriptions-item>
		  		<template slot="label">
		  			<i class="el-icon-timer"></i>
		  			上次修改时间
		  		</template>
		  		{{dialogLookData.updateTime}}
		  		</el-descriptions-item>
		    </el-descriptions>
		  <span slot="footer" class="dialog-footer">
		  <el-button type="primary" @click="revise" v-if="!temp">点击修改</el-button>
		  </span>
		</el-dialog>
		</div>
</template>

<script>
	export default {
	   data() {
	     return {
	       userData:[],//所有数据的数组
			useDate:[], //渲染页面的数组
			total:0,
			searchcontent:"", //搜索框内容
			temp:true,
			dialogVisible:false,
			dialogLookData:{} ,//查看对话框数据
			editData:{},//编辑对话框数据，用于对话框点击关闭按钮，回滚数据
	     }
	   },
		components: {
		  gly: {
		   render(createElement) {
		    return createElement(
		     'script',
		     {
		      attrs: {
		       type: 'text/javascript',
		       src: '../../static/js/root.js',
		      },
		     },
		    );
		   },
		  },
		 },
		 created(){  //钩子函数，初始化渲染数据
			 // this.name = JSON.parse(sessionStorage.getItem('user')).name
			 this.$axios({
			   url:'http://localhost:8081/users',
			   method:'get',
			 }).then(res=>{
				 this.userData = res.data.date
				 if((res.data.date).length % 8 == 0){    //分页刚好够的情况
					 this.useDate = this.userData.slice(0,8)
					 this.total = (res.data.date).length / 8
				 }else{
					 this.useDate = this.userData.slice(0,8) //分页有多余的情况
					 this.total = parseInt((res.data.date).length / 8) + 1
				 }
			 })
		 },
		 methods:{
			 exit(){
				 this.$message({
					 message: '退出成功',
					 type: 'success',
					 center:true,
					 duration:1000,
				 })
				 setTimeout(()=>{
					  this.$router.push('/index')
				 },1200)
			 },
			 handleCurrentChange(currentindex){
				 this.useDate = this.userData.slice((currentindex-1)*8, currentindex*8)
				 console.log(currentindex);
			 },
			  // 点击查看数据
			 lookuser(val){
				 this.dialogVisible = true
				 this.temp = true //控制视图是否显示
				 this.dialogLookData = val
			 },
			 //点击编辑数据
			 edit(val){
				 this.dialogVisible = true
				 this.dialogLookData = val
				 this.editData = val// 保存编辑对话框初始化数据
				 sessionStorage.setItem("editData",JSON.stringify(this.editData))
				 this.temp = false
			 },
			 handleClose(done) {
				 if(this.temp == true){
				 // 对话框右上角叉号关闭
				 this.$confirm('确认关闭？')
				 	.then(_ => {
				 		done();
				 	})
				 	.catch(_ => {});
				 }else{
					 // 对话框右上角叉号关闭
					 this.$confirm('关闭编辑？')
					 	.then(_ => {
						  this.dialogLookData = Object.assign(this.dialogLookData,JSON.parse(sessionStorage.getItem("editData")))
							sessionStorage.removeItem("editData")//移除sessionStorage
							done();
					 	})
					 	.catch(_ => {});
				 }
				 
			},
			revise(){
				this.dialogVisible = false
				console.log(this.dialogLookData)
				this.$axios({
				  url: 'http://localhost:8081/users',
				  method:'put',
				  data:this.dialogLookData,
				}).then(res=>{
					console.log(res)
					if(res.data.code == 20041){
						this.$message({
						  message: '修改成功',
						  type: 'success',
						  center:true,
						  duration:1000
						});
					}else{
						this.$message({
						  message: '修改失败',
						  type: 'error',
						  center:true,
						  duration:1000
						});
					}
				})
			},
			search(){
				var temp = false//点击搜索
				var a = {}
				for(var i = 0;i<this.userData.length;i++){
					if(this.userData[i].name == this.searchcontent){
						a = this.userData[i]
						temp = true
						break
					}
				}
				if(temp){
					this.dialogLookData = a
					this.editData = a// 保存编辑对话框初始化数据
					this.dialogVisible = true
					this.temp = false
				}else{
					this.$message({
						message: '没有查询到数据',
						type: 'warning',
						center:true,
						duration:1000
					})
				}
			},
			changeData(e){  //头部点击按钮
				var a = e.target.innerText
				var temp = []
				if(a == "正常状态"){
					for(var i = 0;i<this.userData.length;i++){
						if(this.userData[i].state == 0){
							temp.push(this.userData[i])
						}
					}
					if(temp.length % 8 == 0){    //分页刚好够的情况
						 this.useDate = temp.slice(0,8)
						 this.total = temp.length / 8
					}else{
						 this.useDate = temp.slice(0,8) //分页有多余的情况
						 this.total = parseInt(temp.length / 8) + 1
					}
				}else if(a == "锁定状态"){
					for(var i = 0;i<this.userData.length;i++){
						if(this.userData[i].state == 1){
							temp.push(this.userData[i])
						}
					}
					if(temp.length % 8 == 0){    //分页刚好够的情况
						 this.useDate = temp.slice(0,8)
						 this.total = temp.length / 8
					}else{
						 this.useDate = temp.slice(0,8) //分页有多余的情况
						 this.total = parseInt(temp.length / 8) + 1
					}
				}else if(a == "删除状态"){
					this.$axios({
					  url:'http://localhost:8081/users/state',
					  method:'get',
					}).then(res=>{
						var a = res.data.date
						if(a % 8 == 0){    //分页刚好够的情况
							 this.useDate = a.slice(0,8)
							 this.total = a.length / 8
						}else{
							 this.useDate = a.slice(0,8) //分页有多余的情况
							 this.total = parseInt(a.length / 8) + 1
						}
					})
					
				}else{   //全部用户
					if(this.userData.length % 8 == 0){    //分页刚好够的情况
						 this.useDate = this.userData.slice(0,8)
						 this.total = this.userData.length / 8
					}else{
						 this.useDate = this.userData.slice(0,8) //分页有多余的情况
						 this.total = parseInt(this.userData.length / 8) + 1
					}
				}
			}
		 }
	 };
</script>

<style scoped>
	@import url('../../static/css/userstate.css');
</style>